<template>
  <el-form ref="form" :model="form" label-width="100px" size="mini">
    <el-form-item label="节点id" prop="id" :rules="{ required: true, message: '请输入节点id', trigger: ['blur', 'change'] }">
      <el-input v-model="form.id" @input="updateBaseInfo('id')" @change="validateNodeId" clearable></el-input>
    </el-form-item>
    <el-form-item label="节点名称" v-if="type !== 'TextAnnotation'">
      <el-input v-model="form.name" @input="updateBaseInfo('name')" clearable></el-input>
    </el-form-item>
    <el-form-item label="注解内容" v-if="type === 'TextAnnotation'">
      <el-input v-model="form.text" @input="updateBaseInfo('text')" clearable></el-input>
    </el-form-item>
    <el-form-item label="节点描述">
      <el-input v-model="form.documentation" type="textarea" @input="updateDocumentation"></el-input>
    </el-form-item>

    <el-row>
      <el-col :span="12">
        <el-form-item label="边框颜色">
          <el-color-picker
              v-model="form.stroke"
              size="mini"
              color-format="hex"
              :predefine="predefineColors"
              @active-change="borderColorChange"
              @change="borderColorChange"
          ></el-color-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="填充颜色" v-if="!['TextAnnotation', 'SequenceFlow'].includes(type)">
          <el-color-picker
              v-model="form.fill"
              size="mini"
              color-format="hex"
              :predefine="predefineColors"
              @active-change="backgroundColorChange"
              @change="backgroundColorChange"
          ></el-color-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="跳过表达式" v-if="skipExpressionCondition">
      <el-input v-model="form.skipExpression" @input="updateBaseInfo('skipExpression')" clearable></el-input>
    </el-form-item>

    <el-form-item label="节点类型" v-if="type === 'UserTask'">
      <el-select v-model="form.nodeType" clearable @change="updateBaseInfo('nodeType')">
        <el-option v-for="(item, i) in nodeTypes" :key="i" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  name: "ElementBaseInfo",
  props: {
    businessObject: Object,
    type: String,
    id: String,
    nodeTypes: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      form: {},
      activeName: "1",
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
      ]
    };
  },
  computed: {
    skipExpressionCondition() {
      return ['UserTask', 'SequenceFlow'].includes(this.type);
    }
  },
  watch: {
    businessObject: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo());
        }
      }
    }
  },
  methods: {
    resetBaseInfo() {
      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
      this.form = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
      //
      this.form.fill = this.bpmnElement.di.fill;
      this.form.stroke = this.bpmnElement.di.stroke;
      // 元素文档
      const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
      this.form.documentation = documentations && documentations.length ? documentations[0].text : "";
    },
    updateBaseInfo(key) {
      const attrObj = Object.create(null);
      attrObj[key] = this.form[key];
      if (key === "id") {
        if (this.form[key]) {
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            id: this.form[key],
            di: {id: `${this.form[key]}_di`}
          });
        }
      } else {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
      }
    },
    updateDocumentation() {
      (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
      const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", {text: this.form.documentation});
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        documentation: [documentation]
      });
    },
    backgroundColorChange(color) {
      window.bpmnInstances.modeling.setColor(this.bpmnElement, {
        fill: color,
        stroke: this.form.stroke,
      });
    },
    borderColorChange(color) {
      window.bpmnInstances.modeling.setColor(this.bpmnElement, {
        fill: this.form.fill,
        stroke: color,
      });
    },
    validateNodeId() {
      // 节点id重复提醒
      if (this.bpmnElement && (this.bpmnElement.id !== this.form.id && window.bpmnInstances.elementRegistry.get(this.form.id))) {
        this.$message.warning(`节点id [ ${this.form.id} ] 的节点已存在`);
      }
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>
